<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="../js/vue.js"></script>
	<style>
		.dialog_window {
			position: absolute;
			top: 100px;
			left: 100px;
			width: 300px;
			height: 200px;
			background-color: #fdb692;
			font-size: 24px;
			line-height: 30px;
		}

		.close_button {
			position: absolute;
			bottom: 0px;
			right: 0px;
		}
	</style>
</head>

<body>
	<div id="app">
		<h4>单击打开对话框按钮时，让对话框显示</h4>
		<button @click="onClickOpenDialog">打开对话框</button>
		<div class="dialog_window" v-show="isShow">
			<button class="close_button" @click="onClickCloseDialog">关闭对话框</button>
			<div>
				这里有很多对话框显示的内容，比如产品介绍 文本说明
				...
			</div>
		</div>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				isShow: false,
			},
			methods: {
				onClickOpenDialog() {
					this.isShow = true;
				},
				onClickCloseDialog() {
					this.isShow = false;
				}
			}
		})
	</script>
</body>

</html>